<template>
  <div class="public">
    <div class="view">
      <RouterView />
    </div>
    <!-- 仅在isShow为true时显示tabbar -->
    <div class="tab" v-if="isShow">
      <van-tabbar router v-model="active">
        <van-tabbar-item to="/" icon="home-o">精选</van-tabbar-item>
        <van-tabbar-item to="/item" icon="search">分类</van-tabbar-item>
        <van-tabbar-item to="/cart" icon="friends-o">购物车</van-tabbar-item>
        <van-tabbar-item to="/my" icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(0)

// 定义白名单路径
const whiteList = ['/', '/home', '/cart', '/my', '/item']
const isShow = ref(false)

// 监听路由变化，动态更新isShow状态
watchEffect(() => {
  // 检查当前路径是否在白名单中
  isShow.value = whiteList.includes(route.fullPath)
  // console.log(route.fullPath)
})
</script>

<style scoped>
.public {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保占满整个视口高度 */
}
.view {
  flex: 1; /* 自动填充剩余空间 */
}
.tab {
  height: 50px; /* 固定tabbar高度，避免百分比适配问题 */
}
</style>
